<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="onExportData">
      导出
    </el-button>

    <el-button type="primary" size="small" @click="onShow">
      导入
    </el-button>
  </div>

  <el-dialog v-model="dialogImportVisible" title="导入" width="30%">
    <el-form label-width="120px">
      <el-form-item label="分类文件">
        <!-- 导入按钮，使用el-upload实现文件上传 -->
        <el-upload
          class="upload-demo"
          action="http://localhost:8200/api/category/excelUpload"
          :on-success="onUploadSuccess"
          :headers="headers"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!---
    懒加载的树形表格
    border 是一个布尔值属性，表示是否在表格中显示边框。设置 border 属性为 true 时，
    lazy 属性启用懒加载功能。在表格数据量很大时，启用 lazy 可以帮助按需加载数据，而不是一次性加载所有数据。
    这样可以避免一次性加载大量数据导致性能问题。通常与 fetchData 方法一起使用，fetchData 方法会在需要加载数据时触发。
    :load="fetchData" 这个属性绑定了一个 fetchData 方法，它会在表格需要加载数据时被调用。
    当启用了 lazy 加载时，每次需要加载数据时，fetchData 方法会被触发。这个方法通常用于从后端请求数据，并将数据加载到表格中。
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :这个属性用于启用树形结构的显示，适用于数据中有嵌套关系的情况。
        children：指定了每一行数据的子数据存放的字段名，这样 el-table 会自动识别该行是否有子节点。如果某行有子节点，它会显示为一棵树形结构。
        hasChildren：指定每一行数据是否有子节点的标识字段。如果字段值为 true，则表格会认为该行是有子节点的，显示为可展开的树节点。
    总结：
        :data：绑定表格数据。
        style：设置表格宽度。
        row-key：每行数据的唯一标识字段。
        border：是否显示表格边框。
        lazy：启用懒加载，按需加载数据。
        :load：绑定数据加载函数。
        :tree-props：配置树形结构的字段。
    -->
  <el-table
    :data="list"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="fetchData"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="分类名称" />
    <el-table-column prop="imageUrl" label="图标" #default="scope">
      <img :src="scope.row.imageUrl" width="50" />
    </el-table-column>
    <el-table-column prop="orderNum" label="排序" />
    <el-table-column prop="status" label="状态" #default="scope">
      {{ scope.row.status == 1 ? '正常' : '停用' }}
    </el-table-column>
    <!-- <el-table-column prop="createTime" label="创建时间" /> -->
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useApp } from '@/pinia/modules/app'
import { getSelectList, getExportData } from '@/api/category'
import { ElMessage } from 'element-plus'
// 定义list属性模型
const list = ref([
  {
    id: 1,
    name: '数码',
    orderNum: '1',
    status: 1,
    createTime: '2023-05-22',
    hasChildren: true,
  },
  {
    id: 2,
    name: '手机',
    orderNum: '1',
    status: 1,
    createTime: '2023-05-22',
    hasChildren: true,
  },
])
//=============================在这里请求一级商品分类==============================================================
// onMounted钩子函数,页面加载完毕发起请求
onMounted(async () => {
  const { code, data, message } = await getSelectList(0)
  list.value = data
})

// 加载数据的方法
const fetchData = async (row, treeNode, resolve) => {
  // 向后端发送请求获取数据
  const { code, data, message } = await getSelectList(row.id)
  // 返回数据
  resolve(data)
}
//======================================导出功能============================================================
//导出按钮事件
const onExportData = async () => {
  try {
    const response = await getExportData()
    console.log(response) // 查看响应数据

    // 确保 response.data 是 Blob 类型
    // if (!(response.data instanceof Blob)) {
    //   console.error('返回的数据不是 Blob 类型！')
    //   return
    // }

    // 假设 getExportData 返回的是一个 Blob 对象或者是一个包含二进制数据的 ArrayBuffer
    const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }) // 注意：这里的 response.data 需要是二进制数据
    // 创建 a 标签元素, 并将 Blob 对象转换成 URL
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    // 设置下载文件名称
    link.download = '商品分类数据表格.xlsx'
    // 隐藏 a 标签（可选）
    link.style.display = 'none'
    // 模拟点击下载
    document.body.appendChild(link) // 有时需要先将元素添加到 DOM 中才能触发点击事件
    link.click()
    document.body.removeChild(link) // 下载完成后移除元素
  } catch (error) {
    console.error('导出数据失败:', error)
    // 可以添加一些用户友好的错误提示
  }
}
//===============================导入功能=========================================
//控制弹窗显示
const dialogImportVisible = ref(false)

//导入按钮事件
const onShow = () => {
  dialogImportVisible.value = true
}

const headers = {
  // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
  token: useApp().authorization.token
}
// 上传文件成功以后要执行方法
const onUploadSuccess = async (response, file) => {
  ElMessage.success('操作成功')
  dialogImportVisible.value = false
  //调用后端接口重新渲染数据
  const { data } = await getSelectList(0)
  list.value = data
}
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
